<template>
  <!--表格-->
  <table class="table">
    <thead>
      <tr>
        <th colspan="2">查询结果</th>
      </tr>
    </thead>
    <tbody>
     
      <tr class="gray">
        <td class="left">卡号归属地省份：</td>
        <td class="right">{{ phoneData.province }}</td>
      </tr>
      <tr class="gray">
        <td class="left">卡号归属地城市：</td>
        <td class="right">{{ phoneData.city }}</td>
      </tr>
      <tr>
        <td class="left">运营商：</td>
        <td class="right">{{ phoneData.company }}</td>
      </tr>
      <tr class="gray">
        <td class="left">区号：</td>
        <td class="right">{{ phoneData.areacode}}</td>
      </tr>
      <tr>
        <td class="left">邮编：</td>
        <td class="right">{{ phoneData.zip }}</td>
      </tr>
      <tr class="gray">
        <td colspan="2">号码归属地数据由聚合数据提供</td>
      </tr>
    </tbody>
  </table>
</template>

<script setup lang="ts">

import usePhoneStore from '@/stores/phone';
import { reactive, ref, watch } from 'vue';


import emitter from '@/utis/emitter';


// 给一个初始值
let phoneData = reactive({
    province:"",
    city:"",
    areacode:"",
    zip:"",
    company:""
})

// 绑定一个事件，让进行传递的组件触发该事件就可以通过第二个参数的回调函数来获取数据，并将数据存放在该组件中
emitter.on('send-phoneData',(value:any) => {
    
  // 当用emitter来重新分配一个对象给reactive定义的对象时，不能直接赋值，要用下面的这种方式来赋值
    Object.assign(phoneData,  { 
      province:value.province,
      city:value.city,
      areacode:value.areacode,
      zip:value.zip,
      company:value.company
      }
    )

  }
)



    
</script>

<style scoped>
.table {
  width: 95%;
  margin: 10px;
  text-align: center;
  font-size: 14px;
  color: #666;
}

.table tr.gray {
  background-color: #eee;
}

.table th {
  color: #444;
  background-color: #eee;
  height: 35px;
  line-height: 35px;
}

.table td {
  height: 35px;
  line-height: 35px;
  padding-right: 5px;
}

.table td.left {
  text-align: right;
  width: 35%;
}

.table td.right {
  padding-left: 5px;
  width: 65%;
  text-align: left;
}
</style>